<template>
  <div style="width: 1200px;margin: auto;">
    <AddHead/>
    <div>
      <el-col :span="24" style="margin: auto">
        <el-card>
          <el-button>编辑</el-button>
          <el-row :gutter="70">
            <el-col :span="4" v-for="(n,index) in 20" :key="index">
              <el-form style="margin-top: 50px">
                <div class="img-cir" style="margin-top: 15px">
                  <div @click="bookChange(1)" class="uuuu"></div>
                  <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/933/45335933/b_45335933.jpg" >
                </div>
                <div style="float: left">
                  <p style="font-size: 15px">太古龙尊</p>
                <p style="font-size: 12px">五岳之巅</p>
                  <span style="font-size: 10px">22章/861章</span>
                  {{n}}
                </div>
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </div>

    <AddTail/>
  </div>


</template>

<script>
export default {
  name: "bookrack",
  data(){
    return{
    }
  },
  mounted() {
  },
  methods: {
    bookChange(id){
      console.log(123)
      if(document.querySelector(".uuuu-act")){
        document.querySelector(".uuuu").classList.add("uuuu-act");
      }else{
        document.querySelector(".uuuu").classList.remove("uuuu-act");
      }
    }
  }
}
</script>

<style scoped>
.img-cir{
  width: 132px;
  height: 188px;
  overflow: hidden;
  float: left;
  border-radius: 10px;

}
img{
  width: 100%;
  height: 100%;
  transition: all 0.6s;
  cursor: pointer;
  float: left;
}
img:hover{
  transform: scale(1.2);
}
.uuuu{
  position: absolute;
  left: 140px;
  top: 220px;
  width: 20px;
  height: 20px;
  background: #e8e8e8;
}
.uuuu-act{
  background: #00afff !important;
}
</style>
